<template>
  <div class="problem" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="常见问题" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="list">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <div class="box">
              <span>1、支持提现的银行和到账时间？</span>
            </div>
          </template>
          <div class="hide">
            <div v-for="x in gwzn">
              <span>{{x.title}}</span>
              <br>
              <span>{{x.text}}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <div class="box">
              <span>2、提现成功后，银行卡未到账怎么办？</span>
            </div>
          </template>
          <div class="hide">
            <div v-for="x in gwzn">
              <span>{{x.title}}</span>
              <br>
              <span>{{x.text}}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <div class="box">
              <span>3、关于平台提现服务为的收费标准是什么？</span>
            </div>
          </template>
          <div class="hide hide_1" v-for="x in shfw">
            {{x.title}}
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse accordion>
      <el-collapse-item>
        <template slot="title">
          <div class="box">
            <span>4、平台支持哪些银行的提现？</span>
          </div>
        </template>
        <div class="hide">
          <div v-for="x in gwzn">
            <span>{{x.title}}</span>
            <br>
            <span>{{x.text}}</span>
          </div>
        </div>
      </el-collapse-item>
      </el-collapse>
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <div class="box">
              <span>5、评价审核规范</span>
            </div>
          </template>
          <div class="hide">
            <div v-for="x in gwzn">
              <span>{{x.title}}</span>
              <br>
              <span>{{x.text}}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <div class="box">
              <span>6、优惠券说明</span>
            </div>
          </template>
          <div class="hide">
            <div v-for="x in gwzn">
              <span>{{x.title}}</span>
              <br>
              <span>{{x.text}}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>


<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "problem",
    components: {
      myHead
    },
    data() {
      return {
        time: [{
          url: '../../../static/img/rxdh.png',
          title: '热线电话',
          time: '07:00-21:00'
        }, {url: '../../../static/img/zxkf.png', title: '在线客服', time: '08:00-20:00'}],
        gwzn: [{title: 'a) 商品修改数量', text: "如果您要修改商品的数量，可在购物车的数量处输入数量。如果您要购买的商品，在购物车中，你勾选需要购买的商品进行结账。"},
          {title: 'b) 删除商品', text: "如果您要删除商品，在购物车中，你可以单个删除你需要删除的商品。"}, {
            title: 'c) 将商品移入收藏夹',
            text: "如果你是登陆用户，当你删除某个商品后，此商品也将进入你的收藏夹；如果您暂时不想订购此商品，可在购物车中，点击\"收藏夹\"按钮收藏即可。"
          },
          {title: 'd) 进入结算中心', text: "当您确认选购的商品无误后（包括商品价格、数量、库存、优惠信息），可点击右侧\"去结账\"按钮，进行结算操作。"}],
        shfw: [{title: "客户服务", page: ''}, {title: "评价审核规范", page: ''}],
        activeNames: ['0'],
        tel:17391751754
      }
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      jump(page){
        this.$router.push({
          name:page
        })
      },
      call(phone){
        // 调用拨号功能
        window.location.href = 'tel://' + phone;
      },
    },
    created() {

    },
    mounted() {

    }
  }
</script>

<style scoped>
  .problem {
    padding-top: .5rem;
    min-height: 6.17rem;
    background-color: #F5F5F5;
  }
  .problem .search>img {
    width: .13rem;
    height: .13rem;
    margin-right: .1rem;
  }
  .problem .problem > section {
    width: 100%;
    background-color: #ffffff;
    height: 100%;
    box-sizing: border-box;
    padding: .2rem .3rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .problem .list {
    width: 100%;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 0 .1rem;
  }

  .problem .box {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    padding: 0 .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
  }

  .problem .box > div:nth-child(1) {
    width: .4rem;
    text-align: left;
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .problem .box > div > img:nth-child(1), .list-img {
    width: .14rem;
    height: .16rem;
  }

  .problem .box > span:nth-child(2) {
    font-size: .15rem;
    color: #333333;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .problem .box > img:nth-child(3) {
    width: .1rem;
    height: .055rem;
    position: absolute;
    right: 0;
  }

  .problem .hide {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    line-height: .24rem;
    padding: 0 .1rem;
    margin-bottom: .15rem;
  }

  .problem .hide_1 {
    height: .5rem;
    color: #333333;
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: .5rem;
    padding-left: .5rem;
    margin-bottom: 0;
  }
  .problem .hide_1:nth-child(1) {
    border-bottom: .01rem solid #E6E6E6;
  }
  >>> .el-collapse {
    border-top: none;
  }
  >>> .el-collapse-item__content {
    padding-bottom: 0;
  }

/* 下拉列表适配 */
  >>> .el-collapse-item__header {
    line-height: .48rem;
    font-size: .15rem;
  }
  >>> .el-collapse-item__arrow {
    margin: 0 .08rem 0 auto;
  }
  >>> .el-collapse-item__header {
    height: .5rem;
    border-bottom: .01rem solid #EBEEF5;
  }
</style>
